<template>
  <div class="site-rules" v-if="!isTest">
    <div class="start-site-list">
      <div class="site-ctrl-group">
        <div class="the-title">起始网址</div>
        <el-button size="mini" icon="el-icon-plus" @click="guideDialog = true">向导添加</el-button>
        <el-button size="mini" icon="el-icon-plus" @click="addNewLine">添加一行</el-button>
        <el-button size="mini" icon="el-icon-delete" @click="cleanSiteList">清空</el-button>
      </div>
      <ol class="site-list-block">
        <li class="site" v-for="(v, i) in siteList" :key="i">
          <div class="site-item">
            <el-input class="site-input" v-model="v.url" type="text"/>
            <div class="site-input-ctrl">
              <icon-tip class="ctrl-icon-tip" content="向导编辑" eleIcon="el-icon-edit" placement="top"></icon-tip>
              <icon-tip class="ctrl-icon-tip" @click.native="deleteCurrent(v, i)" content="删除" eleIcon="el-icon-close" placement="top"></icon-tip>
              <icon-tip class="ctrl-icon-tip" @click.native="topCurrent(v, i)" content="上移" eleIcon="el-icon-sort-up" placement="top"></icon-tip>
              <icon-tip class="ctrl-icon-tip" @click.native="downCurrent(v, i)" content="下移" eleIcon="el-icon-sort-down" placement="top"></icon-tip>
            </div>
          </div>
        </li>
      </ol>
    </div>
    <content-url-set></content-url-set>
    <div class="goto-test">
      <div class="left-content">
        <i class="el-icon-info"></i>
        需要登录才能采集? 指定浏览器才能访问? <el-button type="text" size="mini">点击设置</el-button>
      </div>
      <div class="right-btn">
        <el-button type="primary" size="mini" @click="isTest = true">网址采集测试</el-button>
      </div>
    </div>
    <el-dialog
      title="起始网址添加向导"
      :visible.sync="guideDialog"
      width="700px">
      <add-guide @cancel="guideDialog = false" @submit="guideAdd"></add-guide>
    </el-dialog>
  </div>
  <collect-test v-else @goback="isTest = false"></collect-test>
</template>
<script>
import IconTip from '@/components/IconTip.vue'
import AddGuide from './components/AddGuide.vue'
import ContentUrlSet from './components/ContentUrlSet.vue'
import CollectTest from './collectTest.vue'

export default {
  name: 'SiteRules',
  components: {
    IconTip,
    AddGuide,
    ContentUrlSet,
    CollectTest
  },
  data () {
    return {
      siteList: [{
        url: 'http://',
        type: 'first'
      }],
      guideDialog: false,
      isTest: false // 是否处于测试
    }
  },
  methods: {
    /**
     * 向导添加
     */
    guideAdd (e) {
      console.log(e)
      if (e.type === 'first') {
        e.urlArr.forEach(v => {
          this.siteList.push({
            url: v,
            type: 'first'
          })
        })
      }
    },
    addNewLine () {
      this.siteList.push({
        url: 'http://',
        type: 'first'
      })
    },
    /**
     * 删除当前行
     */
    deleteCurrent (v, i) {
      if (this.siteList.length > 1) {
        this.siteList.splice(i, 1)
      }
    },
    /**
     * 上移当前行
     */
    topCurrent (v, i) {
      if (i === 0) return
      [this.siteList[i - 1], this.siteList[i]] = [this.siteList[i], this.siteList[i - 1]]
      this.$forceUpdate()
    },
    /**
     * 下移当前行
     */
    downCurrent (v, i) {
      if (i === this.siteList.length - 1 || this.siteList.length === 1) return
      [this.siteList[i], this.siteList[i + 1]] = [this.siteList[i + 1], this.siteList[i]]
      this.$forceUpdate()
    },
    /**
     * 清空
     */
    cleanSiteList () {
      this.$confirm('确定要清空?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.siteList = [{
          url: 'http://'
        }]
      }).catch()
    }
  }
}
</script>
<style lang="scss">
.site-rules {
  .start-site-list {
    .site-list-block {
      height: 166px;
      overflow-y: auto;
    }
    .site-ctrl-group {
      padding: 20px 20px 0;
      text-align: right;
      .the-title {
        float: left;
      }
    }
    .site {
      margin-bottom: 10px;
    }
    .site-item {
      display: flex;
      .site-input {
        width: 90%;
        .el-input__inner {
          height: 25px;
          line-height: 25px;
        }
      }
      .site-input-ctrl {
        .ctrl-icon-tip {
          margin: 0 5px;
        }
      }
    }
  }
  .goto-test {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    background: #dfdfdf;
  }
}

</style>
